<template>
	<view class="bgc">
		<view class="logo"><image src="../../static/img/logo.png" mode=""></image></view>
		<view class="box">
			<view class="b_Box">
				<view class="number" style="padding-top: 200upx;">
					<view class="text">手机号：</view>
					<input class="phone" type="number" value="" maxlength="11" @blur="getPhone" placeholder="请输入手机号" />
				</view>
				<view class="number">
					<view class="text">验证码：</view>
					<view class="verification">
						<input class="phone" type="text" value="" @blur="onInput" placeholder="请输入验证码" />
						<button v-if="showText == true" class="btn" type="default" @click="getCode">获取验证码</button>
						<view v-else class="send">{{ second }}s</view>
					</view>
				</view>
				<button class="confirm" type="default" @click="confirm">确定</button>
				<button class="shortcut" open-type="getPhoneNumber" @getphonenumber="shortcut">微信快捷绑定</button>
			</view>
		</view>
	</view>
</template>

<script>
import utils from '@/static/common/utils.js';
import value from '@/static/value/value.js';
export default {
	data() {
		return {
			phone: '',
			authCode: '',
			second: 30,
			showText: true
		};
	},
	methods: {
		// 手机号
		getPhone(e) {
			this.phone = e.target.value;
		},
		// 验证码
		onInput(e) {
			this.authCode = e.target.value;
		},
		// 获取验证码
		getCode() {
			var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
			if (!myreg.test(this.phone)) {
				uni.showModal({
					title: '提示',
					showCancel: false,
					content: '请确定这是一个正确的手机号'
				});
				return false;
			}
			// 获取验证码
			const that = this;
			var data = {
				phone: this.phone,
				ticks: utils.utils.GetTicks(),
				channel: this.$tokenObj.obj.channel
			};
			data.sign = utils.utils.GetSign(data);
			this.$http
				.request({
					url: '/Member/SendVerificationCode',
					method: 'POST',
					data: data
				})
				.then(data => {
					if (data.data.result === false) {
						uni.showModal({
							title: '获取验证码失败',
							showCancel: false,
							content: data.data.msg
						});
					} else {
						this.showText = false;
						var interval = setInterval(() => {
							let times = --this.second;
							this.second = times < 10 ? '0' + times : times; //小于10秒补 0
						}, 1000);
						setTimeout(() => {
							clearInterval(interval);
							this.second = 30;
							this.showText = true;
						}, 30000);
					}
				});
		},
		// 绑定手机号
		confirm() {
			if (this.phone == '') {
				uni.showToast({
					icon: 'none',
					duration: 2000,
					title: '请输入手机号'
				});
				return false;
			} else if (this.authCode == '') {
				uni.showToast({
					icon: 'none',
					duration: 2000,
					title: '请输入验证码'
				});
				return false;
			} else {
				const that = this;
				var obj = {
					phone: this.phone,
					code: this.authCode,
					type: 2,
					iv: 'iv',
					ticks: utils.utils.GetTicks(),
					channel: this.$tokenObj.obj.channel
				};
				obj.sign = utils.utils.GetSign(obj);
				this.$http
					.request({
						url: '/Member/BindPhone',
						method: 'POST',
						data: obj
					})
					.then(data => {
						if (data.data.result == true) {
							uni.navigateBack({});
							uni.showToast({
								icon: 'none',
								duration: 2000,
								title: '绑定成功'
							});
							uni.setStorage({
								key: 'phone',
								data: this.phone,
								success() {}
							});
						} else {
							// uni.showModal({
							// 	title: '绑定失败',
							// 	showCancel: false,
							// 	content: data.data.msg
							// });
						}
					})
					.catch(err => {
						console.log(err);
					});
			}
		},
		// 微信快捷绑定
		shortcut(e) {
			const that = this;
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					var data = {
						phone: e.detail.encryptedData,
						type: 1,
						iv: e.detail.iv,
						code: loginRes.code,
						ticks: utils.utils.GetTicks(),
						channel: that.$tokenObj.obj.channel
					};
					data.sign = utils.utils.GetSign(data);
					that.$http
						.request({
							url: '/Member/BindPhone',
							method: 'POST',
							data: data
						})
						.then(res => {
							// if(res.data.phone)
							if (res.data.result == true) {
								uni.navigateBack({});
								uni.showToast({
									icon: 'none',
									duration: 2000,
									title: '绑定成功'
								});
								uni.setStorage({
									key: 'phone',
									data: res.data.phone,
									success() {}
								});
							} else {
								uni.showModal({
									title: '绑定失败',
									showCancel: false,
									content: res.data.msg
								});
							}
						});
				}
			});
		}
	}
};
</script>

<style scoped>
.bgc {
	width: 100%;
	height: 100%;
	background-color: #f8f8f8;
}
.logo {
	top: 160upx;
	margin: auto;
	width: 240upx;
	height: 240upx;
	position: relative;
	/* padding-top: 10%; */
}
.logo image {
	width: 100%;
	height: 100%;
}
.box {
	width: 90%;
	margin: auto;
	background-color: #ffffff;
}
.b_Box {
	width: 92%;
	margin: auto;
}
.number {
	display: flex;
	margin-top: 50upx;
}
.text {
	font-size: 35upx;
}
.phone {
	padding-bottom: 10upx;
	border-bottom: 1upx solid #ebebeb;
}
.verification {
	width: 76%;
	display: flex;
}
.btn {
	width: 210upx;
	height: 50upx;
	color: #00a0ff;
	font-size: 25upx;
	line-height: 50upx;
	border: 1px solid #00a0ff;
}
.confirm {
	height: 90upx;
	color: #00a0ff;
	margin-top: 50upx;
	line-height: 90upx;
	border: 1px solid #00a0ff;
}
.shortcut {
	height: 90upx;
	color: #ffffff;
	margin-top: 35upx;
	line-height: 90upx;
	background-color: #00a0ff;
}
.send {
	color: #c8c7cc;
	font-size: 28upx;
}
</style>
